import React from "react";
import {Link} from "react-router";
import cookie from "react-cookie";

class TradingRecord extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {shoppingNames, tradingRecords, shopNo, totalTreadCount, isMultiShop} = this.props;
        let shopOrderList = tradingRecords.orderVos;
        let totalAmount = tradingRecords.totalAmount;
        let tradeCount = tradingRecords.tradeCount;
        if (isMultiShop) {
            let categoryWidth = shoppingNames.length * 120 + 'px';
            return (
                <div className="marginTop10">
                    <div className="trading-record-amount">今日成功交易总笔数:{totalTreadCount}笔</div>
                    <div className="shop-name-container-outer">
                        <div className="shop-name-container" style={{width: categoryWidth}}>
                            {
                                shoppingNames.map((item, index) => {
                                    let className = ((index == 0 && shopNo == 0) || item.shopNo == shopNo) ? 'curr' : '';
                                    return (
                                        <Link className={className} key={index}
                                              onClick={this._fetchTradingRecordsByShopId.bind(this, item.shopNo)}>{item.shopName}</Link>
                                    );
                                })
                            }
                        </div>
                    </div>
                    <div className="trading-record-amount2">今日成功交易笔数:{tradeCount}笔</div>
                    <div className="merchant-service-shop-header">
                        <div>
                            <div>{totalAmount}</div>
                            <div>今日收入(元)</div>
                        </div>
                    </div>
                    <hr className="base-divide-line"/>
                    <ul className="marginBottom80">
                        {
                            shopOrderList.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <div>
                                            <div className="order-record-container">
                                                <div>{item.orderAmount}</div>
                                                <div>{item.statusDesc}</div>
                                                <div>{item.treadTime}</div>
                                            </div>
                                            <hr className="base-divide-line"/>
                                        </div>
                                    </li>
                                );
                            })
                        }
                    </ul>
                </div>
            );
        } else {
            return (
                <div className="marginTop5">
                    <div className="trading-record-amount">
                        今日成功交易总笔数:{totalTreadCount}笔
                    </div>
                    <ul className="marginBottom80">
                        {
                            shopOrderList.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <div>
                                            <div className="order-record-container">
                                                <div>{item.orderAmount}</div>
                                                <div>{item.statusDesc}</div>
                                                <div>{item.treadTime}</div>
                                            </div>
                                            <hr className="base-divide-line"/>
                                        </div>
                                    </li>
                                );
                            })
                        }
                    </ul>
                </div>
            );
        }
    }

    _fetchTradingRecordsByShopId(shopNo) {
        cookie.save("shopNo", shopNo);
        this.props.fetchTradingRecordsByShopId();
    }
}

export default TradingRecord;